<template>
	<view>
	<u-tabs name="name" :list="tabs" :current="current" :is-scroll="false" @change="tabsCurrent"></u-tabs>
	
	
	
	<view v-if="list.length"  class="u-flex u-flex-wrap u-row-between" style="width: 700rpx;margin: auto;">
		<view v-for="(item,index) in list[current].paper" :key='index'  class="u-margin-bottom-20">
			<view class="u-flex u-text-center" style="width:200rpx;margin:20rpx auto;">
				<image src="/static/paper.png" style="width: 48rpx;height: 48rpx;"></image>
				<text class="u-margin-left-10">{{item.name}}</text> 
			</view>
			<view class="" style="position: relative;" @click="play(item)">
				<image :src="item.cover" style="width: 300rpx;height: 200rpx;border-radius: 10rpx;"></image>
			</view>
			<view class="btn" @click="go(item)">
				 同步练习
			</view>
		</view>
	</view>
	    
  
	<video id="myvideo" :src="video"  @fullscreenchange="fullscreenchanges" style="position: absolute;top: -100%;"></video>
			
	</view>
</template>

<script>
	export default{
		data(){
			return{
			 tabs:[],
			 current:0,
			 list:[],
			 video:'',
			 videoContext:'',
			
			}
		},
		onLoad(options) {
			if (options.subject) {
				this.subject = options.subject
			}
			if (options.vip) {
				this.vip = options.vip
			}
			if (options.car_type) {
				this.car_type = options.car_type
			}
			
			if(options.type){
				uni.setNavigationBarTitle({
					title:options.type
				})
				this.type=options.type;
			}
			this.jiazai()
		},
		methods:{
			fullscreenchanges (e){
				if(!e.detail.fullScreen){
					this.video=''
					this.videoContext.stop()
				}
			},
			play(item){
			   this.video=item.video
				this.videoContext = uni.createVideoContext('myvideo',this);
				this.videoContext.requestFullScreen();
			},
			jiazai() {
				this.$u.post('/index/cate', {
					subject: this.subject,
					vip: this.vip,
					car_type: this.car_type,
				}).then(res => {
					this.list = res;
					this.tabs=res;
				}).catch(err => {
			
				})
			},
			go(item){
				uni.navigateTo({
					url:'/pages/case/index?cate_id='+item.id+'&type='+'精选题库'
				})
			},
			tabsCurrent(e){
				this.current=e;
			}
		}
	}
</script>

<style>
	.btn{
		width: 300rpx;
		height: 52rpx;
		border-radius:10rpx;
		border: 1rpx solid #38A5FD;
		text-align: center;
		line-height: 52rpx;
		color: #38A5FD;
		margin:20rpx auto;
	}
</style>
